<div class="che-ram-allocation-slider">
  <div layout="row" flex="100" layout-align="space-between center"
       class="slider-wrapper">
    <div layout="column" layout-align="start start" class="slider-actual-ram-caption">
      <div>{{cheWorkspaceRamAllocationSliderController.inputVal}} GB</div>
    </div>
    <div flex class="slider-holder">
      <md-slider min="0.5" max="32" step="0.5"
                 ng-model="cheWorkspaceRamAllocationSliderController.inputVal"
                 aria-label="Amount of RAM"
                 ng-change="cheWorkspaceRamAllocationSliderController.onChange()"></md-slider>
    </div>
    <div layout="column" layout-align="start end">
      <div class="slider-max-ram-caption">32 GB</div>
    </div>
    <div layout="column" layout-align="center start" class="slider-input">
      <md-input-container>
        <input type="number" min="0.5" max="100" step="0.5"
               ng-model="cheWorkspaceRamAllocationSliderController.inputVal"
               aria-label="Amount of RAM"
               ng-change="cheWorkspaceRamAllocationSliderController.onChange()"/>
      </md-input-container>
    </div>
    <div flex layout="column" layout-aling="center start">
      <span class="slider-max-ram-subtitle">Up to 100 GB</span>
    </div>
  </div>
</div>
